@import plugins.Context
@import org.silkframework.workspace.activity.linking.ReferenceEntitiesCache
@import views.html.workspace.activity.taskActivityControl
@import controllers.rules.routes.Assets
@import controllers.linking.routes
@import org.silkframework.rule.LinkSpec

@(context: Context[LinkSpec])(implicit session: play.api.mvc.Session)

@header = {
  <link type="text/css" href="@Assets.at("stylesheets/table.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/pagination.css")" rel="stylesheet" />
  <link type="text/css" href="@Assets.at("stylesheets/links.css")" rel="stylesheet" />
  <link rel="stylesheet" href="@Assets.at("stylesheets/treeview/jquery.treeview.css")" type="text/css" />
  
  <script src="@Assets.at("js/jquery.pagination.js")" type="text/javascript"></script>
  <script src="@Assets.at("js/jquery.treeview.js")" type="text/javascript"></script>
  <script src="@Assets.at("js/links.js")" type="text/javascript"></script>
  
  <script type="text/javascript">
    var apiUrl = '@config.baseUrl/linking/tasks/@context.project.name/@context.task.id/referenceLink';
    initLinks('referenceLinks', 'positive');
  </script>
}

@toolbar = {
  <ul>
    <li>
      <div id="selectLinks">
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="showPositiveLinks">
          <input type="radio" id="showPositiveLinks" class="mdl-radio__button" name="selectLinks" onchange="updateLinkType('positive')" checked>
          <span class="mdl-radio__label">Positive</span>
        </label>
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="showNegativeLinks">
          <input type="radio" id="showNegativeLinks" class="mdl-radio__button" name="selectLinks" onchange="updateLinkType('negative')">
          <span class="mdl-radio__label">Negative</span>
        </label>
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="showUnlabeledLinks">
          <input type="radio" id="showUnlabeledLinks" class="mdl-radio__button" name="selectLinks" onchange="updateLinkType('unlabeled')">
          <span class="mdl-radio__label">Unlabeled</span>
        </label>
      </div>
    </li>
    <li>
      <div class="spacer"/>
    </li>
    <li>
      <button class="mdl-button mdl-js-button mdl-button--raised" onclick="showDialog('referenceLinks/addLinkDialog')">Add</button>
    </li>
    <li>
      <button class="mdl-button mdl-js-button mdl-button--raised" onclick="showDialog('referenceLinks/importDialog')">Import</button>
    </li>
    <li>
      <button class="mdl-button mdl-js-button mdl-button--raised" onclick="showDialog('referenceLinks/removeLinksDialog')">Remove</button>
    </li>
    <li>
      <button class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location = '@routes.LinkingTaskApi.getReferenceLinks(context.project.name, context.task.id).url'">Download</button>
    </li>
    <li>
      <a class="mdl-button mdl-js-button mdl-button--icon" href="http://www.assembla.com/spaces/silk/wiki/Managing_Reference_Links" target="_help">
        <i class="material-icons">help_outline</i>
      </a>
    </li>
    <li>
      <div class="spacer"/>
    </li>
    <li>
      @taskActivityControl(context.task.activity[ReferenceEntitiesCache], showButtons = true)
    </li>
  </ul>
}

@content = {
  <div class="mdl-shadow--2dp">
    <div class="wrapper">

      <div id="tree-header">
        <div class="left">
          <div class="toggle-all"><div class="plus"></div><a href="#" onclick="expand_all();">Expand All</a></div>
          <div class="toggle-all"><div class="minus"></div><a href="#" onclick="hide_all();">Collapse All</a></div>
        </div>
        <div class="middle">
          <div class="navigation"></div>
        </div>
        <div class="right">
          Filter:
          <input onkeyup="updateFilter(this.value)"/>
        </div>
        <div id="pending"><img src="@Assets.at("img/pending.gif")"></div>
      </div>

      <div id="links">
      </div>

    </div>
  </div>
}

@main(Some(context))(header)(toolbar)(content)